<template>
    <div class="contain" style="flex-direction: column;">
        <HouseDetailTop :dataList="topDataList" :id="this.$route.query.id" :BasicDetailList="BasicDetailList"></HouseDetailTop>
        <div>
            <HouseDeatilNavigation @returnData="setPage" :navList="topNavList"></HouseDeatilNavigation>
        </div>
        <BasicDetail v-if="page == '1'" :officialList="officialList"
            :peopleList="peopleList" :isSecondHand="this.$route.query.index"></BasicDetail>
        <PictureVideoDetail v-if="page == '2'"></PictureVideoDetail>
        <EntrustDetail v-if="page == '3'"></EntrustDetail>
        <TakeLookDetail v-if="page == '4'"></TakeLookDetail>
        <HousingUpdatesDetail v-if="page == '5'"></HousingUpdatesDetail>
        <VisitorRecord v-if="page == '6'"></VisitorRecord>
    </div>
</template>
    
<script>
import BasicDetail from './BasicDetail.vue'
import VisitorRecord from './VisitorRecord.vue';
import TakeLookDetail from './TakeLookDetail.vue';
import EntrustDetail from './EntrustDetail.vue';
import PictureVideoDetail from './PictureVideoDetail.vue';
import HousingUpdatesDetail from './HousingUpdatesDetail.vue';
import { findHouseBaseById, findByHouseId, findUserByHouseId } from '../../http/api'
import HouseDeatilNavigation from '@/components/navigation/HouseDeatilNavigation.vue';
import HouseDetailTop from '@/components/houseList/HouseDetailTop.vue';
import pinia from '../../store'
import { useHouse } from '../../store/houseShareData'
export default {
    name: 'HouseDetail',
    components: {
        BasicDetail,
        PictureVideoDetail,
        EntrustDetail,
        TakeLookDetail,
        HousingUpdatesDetail,
        VisitorRecord,
        HouseDeatilNavigation,
        HouseDetailTop
    },
    data() {
        return {
            page: '1',
            topNavList: [this.$t('text.House.l1'), this.$t('text.House.l2'), this.$t('text.House.l3'),
            this.$t('text.House.l4'), this.$t('text.House.l5'), this.$t('text.House.l6')],
            topDataList: [],
            officialList: {},
            peopleList: [],
            BasicDetailList:{}
        }
    },
    mounted() {
        if (this.$route.query.id != undefined) {
            findHouseBaseById({ id: this.$route.query.id }).then(res => {
                if (res !== undefined && res != null) {
                    const houseData = useHouse(pinia)
                    houseData.houseBaseData= JSON.parse(JSON.stringify(res))
                    this.BasicDetailList=JSON.parse(JSON.stringify(res))

                    let supporting = []
                    if (res.supportingFacilities != null && res.supportingFacilities != undefined) {
                        supporting = [...supporting, ...res.supportingFacilities.split(",")]
                    }
                    if (res.characteristic != null && res.characteristic != undefined) {
                        supporting = [...supporting, ...res.characteristic.split(",")]
                    }
                    if (res.businessScope != null && res.businessScope != undefined) {
                        supporting = [...supporting, ...res.businessScope.split(",")]
                    }
                    let data = []
                    if (this.$route.query.index == '0') {
                        data = [
                            { title: this.$t('text.House.l113'), value: res.price == null ? '-' : String(res.price).replace(/\B(?=(\d{3})+(?!\d))/g, ',') }, { title: this.$t('text.House.l114'), value: res.avPrice == null ? '-' : String(res.avPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + 'AED/m²' },
                            { title: this.$t('text.House.l97'), value: res.floorArea == null ? '-' : res.floorArea + 'm²' },
                            {
                                title: this.$t('text.House.l116'), value:
                                    `${res.roomNumber <= 0 ? '' : (res.roomNumber + this.$t('text.House.l198'))}` +
                                    `${res.parlorNumber <= 0 ? '' : (res.parlorNumber + this.$t('text.House.l199'))}` +
                                    `${res.toiletNumber <= 0 ? '' : res.toiletNumber + this.$t('text.House.l200')}` +
                                    `${res.balconyNumber <= 0 ? '' : res.balconyNumber + this.$t('text.House.l201')}` +
                                    `${res.balconyNumber <= 0 && res.roomNumber <= 0 && res.toiletNumber <= 0 && res.toiletNumber <= 0 ?'-':''}`
                            },
                            { title: this.$t('text.House.l117'), value: res.placeStorey + '/' + res.totalFloor + this.$t('text.House.l202') }, { title: this.$t('text.House.l118'), value: res.toward },
                            { title: this.$t('text.House.l119'), value: res.decorationLevel == null ? '-' : res.decorationLevel }
                        ]
                    }
                    if (this.$route.query.index == '1') {
                        data = [
                            { title: this.$t('text.House.l135'), value: res.rentPrice == null ? '-' : String(res.rentPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + this.$t('text.House.l203') }, { title: this.$t('text.House.l136'), value: res.rentPayMethod == null ? '-' : res.rentPayMethod },
                            { title: this.$t('text.House.l97'), value: res.floorArea == null ? '-' : res.floorArea + 'm²' },
                            { title: this.$t('text.House.l116'), value: res.roomNumber + this.$t('text.House.l198') + res.parlorNumber + this.$t('text.House.l199') + res.toiletNumber + this.$t('text.House.l200') + res.balconyNumber + this.$t('text.House.l201') },
                            { title: this.$t('text.House.l117'), value: res.placeStorey + '/' + res.totalFloor + this.$t('text.House.l202') }, { title: this.$t('text.House.l118'), value: res.toward },
                            { title: this.$t('text.House.l119'), value: res.decorationLevel == null ? '-' : res.decorationLevel }
                        ]
                    }
                    let temp = JSON.parse(JSON.stringify(res))
                    temp.supportingFacilities = supporting
                    temp.community = res.community
                    temp.communityId = res.communityId
                    temp.data = data
                    temp.pictureAddress = res.pictureAddress
                    this.topDataList = temp


                    findByHouseId({ houseId: this.$route.query.id }).then(res => {
                        if (res !== undefined && res != null) {
                            this.officialList = res
                        }
                    }).catch()

                    findUserByHouseId({ houseId: this.$route.query.id }).then(res => {
                        if (res !== undefined && res != null) {
                            this.peopleList = res
                        }
                    }).catch()

                }
            }).catch()

        }
    },
    methods: {
        setPage(index) {
            this.page = index
        }

    },
    watch: {

    },
    computed: {
    }

}
</script>
    
<style scoped>
.contain {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
}
</style>